<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>

<style>
    #myCanvas{
        border: 1px solid #ddd;
    }
</style>

<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<img id="myImg" width="500"  src="http://pic26.nipic.com/20121221/9252150_142515375000_2.jpg" />
</body>


<script>
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");

    function drawRect() {
            ctx.fillStyle = "red";
            ctx.fillRect(0, 0, 45, 45);
            ctx.fillStyle = "rgb(200,0,0)";
            //绘制矩形
            ctx.fillRect(10, 10, 55, 50);
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            //strokeRect(x, y, width, height)绘制一个矩形的边框
            ctx.strokeRect(45, 45, 60, 45);
            //clearRect(x, y, width, height)清除指定的矩形区域，然后这块区域会变的完全透明。
            ctx.clearRect(25, 35, 60, 45); 
    }

    function drawPath() {
        ctx.beginPath();
        ctx.fillStyle = 'red';
        ctx.moveTo(10, 10);
        ctx.lineTo(50, 45);
        ctx.lineTo(50, 85);
        // ctx.closePath();
        ctx.stroke();
    }


    function drawArc() {

        // ctx.beginPath();
        // ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
        // ctx.stroke();
        //
        // ctx.beginPath();
        // ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
        // ctx.closePath();
        // ctx.stroke();
        //
        // ctx.beginPath();
        // ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
        // ctx.fill();
        //
        // ctx.beginPath();
        // ctx.arc(150, 150, 40, 0, Math.PI, false);
        // ctx.fill();
        //
        //
        ctx.beginPath();
        ctx.moveTo(50, 50);
        //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
        ctx.arcTo(200, 50, 200, 200, 100);
        ctx.lineTo(200, 200)
        ctx.stroke();
        //
        ctx.beginPath();
        ctx.rect(50, 50, 3, 3);
        ctx.rect(200, 50, 3, 3)
        ctx.rect(200, 200, 3, 3)
        ctx.fill()
    }


    function drawBezier() {
        ctx.beginPath();
        ctx.moveTo(40, 200); //起始点
        var cp1x = 20, cp1y = 100;  //控制点1
        var cp2x = 100, cp2y = 120;  //控制点2
        var x = 200, y = 200; // 结束点
        //绘制二次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
        ctx.stroke();

        ctx.beginPath();
        ctx.rect(40, 200, 10, 10);
        ctx.rect(cp1x, cp1y, 10, 10);
        ctx.rect(cp2x, cp2y, 10, 10);
        ctx.rect(x, y, 10, 10);
        ctx.fill();
    }


    function drawFillStyle() {
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 6; j++) {
                ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
                    Math.floor(255 - 42.5 * j) + ',0)';
                ctx.fillRect(j * 50, i * 50, 50, 50);
            }
        }
    }


    function randomInt(from, to) {
        return parseInt(Math.random() * (to - from + 1) + from);
    }


    function drawStroke() {
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 6; j++) {
                ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
                ctx.strokeRect(j * 50, i * 50, 40, 40);
            }
        }
    }


    function drawGlobalAlpha() {
        ctx.fillStyle = "red";
        ctx.fillRect(20, 20, 75, 50);
        // 调节透明度
        ctx.globalAlpha = 0.2;
        ctx.fillStyle = "blue";
        ctx.fillRect(50, 50, 75, 50);
        ctx.globalAlpha = 1;
        ctx.fillStyle = "green";
        ctx.fillRect(80, 80, 75, 50);
    }


    function drawLineWidth() {
        ctx.strokeStyle = "red";
        ctx.beginPath(); 
        ctx.moveTo(100,100);
        ctx.lineTo(100,200);
        ctx.lineWidth = 20;
        ctx.lineCap = "round";
        // ctx.closePath();
        ctx.stroke();


        ctx.beginPath();
        ctx.moveTo(0, 100);
        ctx.lineTo(300, 100);

        ctx.moveTo(0, 200);
        ctx.lineTo(300, 200)

        ctx.strokeStyle = "red";
        ctx.lineWidth = 1;
        ctx.stroke();
    }


    function drawLineJoin() {
        var lineJoin = ['round', 'bevel', 'miter'];
        ctx.lineWidth = 20;

        for (var i = 0; i < lineJoin.length; i++){
            ctx.lineJoin = lineJoin[i];
            ctx.beginPath();
            ctx.moveTo(50, 50 + i * 50);
            ctx.lineTo(100, 100 + i * 50);
            ctx.lineTo(150, 50 + i * 50);
            ctx.lineTo(200, 100 + i * 50);
            ctx.lineTo(250, 50 + i * 50);
            ctx.stroke();
        }
    }

    function drawDashLine1() {
        ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
        ctx.lineDashOffset = -0;
        ctx.strokeRect(50, 50, 210, 210);
    }

    function drawDashLine2() {
        ctx.setLineDash([20, 5,30,40]);  // [实线长度, 间隙长度]
        ctx.lineDashOffset = -0;
        ctx.strokeRect(50, 50, 210, 210);
    }

    function drawDashLine3() {
        ctx.setLineDash([20, 5,60,60]);  // [实线长度, 间隙长度]
        ctx.lineDashOffset = 60;
        ctx.strokeRect(50, 50, 210, 210);
        let x = ctx.getLineDash()

        console.log(x);
    }

    function drawFont() {
        ctx.fillText("天若有情", 10, 100,300);
        
        ctx.textAlign = "center"
        ctx.fillText("天若有情", 10, 100,300);


        ctx.textBaseline  = "top"
        ctx.fillText("天若有情", 10, 100,300);

        ctx.direction = 'rtl';
        ctx.textBaseline  = "bottom"
        ctx.fillText("天若有情", 10, 100,300);
    }


    function drawImg1() {
        var img = new Image();   // 创建img元素
        img.onload = function(){
            ctx.drawImage(img, 0, 0)
        }
        img.src = 'http://pic26.nipic.com/20121221/9252150_142515375000_2.jpg'; // 设置图片源地址
    }

    function drawImg2() {
        var img = document.getElementById("myImg");   // 创建img元素
        img.onload = function(){
            ctx.drawImage(img, 5, 50)
        }
    }


    function drawImg3() {
        var img = document.getElementById("myImg");   // 创建img元素
        img.onload = function(){
            ctx.drawImage(img, 5, 50,700,500);
        }
    }


    drawImg3();

</script>

</html>